<template>
    <div>
        <head-top></head-top>
		<h1 class="title">作业发布</h1>
        <el-row style="margin-top: 20px;">
  			<el-col :span="12" :offset="4">
		        <el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
					<el-form-item label="题目内容" prop="title">
						<el-input v-model="formData.title"></el-input>
					</el-form-item>
				
					<el-form-item label="选项A" prop="itemA">
						<el-input v-model="formData.itemA" maxLength="11"></el-input>
					</el-form-item>
					<el-form-item label="选项B" prop="itemB">
						<el-input v-model="formData.itemB" maxLength="11"></el-input>
					</el-form-item>
					<el-form-item label="选项C" prop="itemC">
						<el-input v-model="formData.itemC" maxLength="11"></el-input>
					</el-form-item>
					<el-form-item label="选项D" prop="itemD">
						<el-input v-model="formData.itemD" maxLength="11"></el-input>
					</el-form-item>
					<el-form-item label="正确答案" prop="answer">
						<el-input v-model="formData.answer" maxLength="11"></el-input>
					</el-form-item>
				
					<el-form-item class="button_submit">
						<el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
					</el-form-item>
				</el-form>
  			</el-col>
  		</el-row>
    </div>
</template>

<script>
    import headTop from '@/components/headTop'
    import {cityGuess, addShop, searchplace, foodCategory,addTestTitle} from '@/api/getData'
    import {baseUrl, baseImgPath} from '@/config/env'
    export default {
    	data(){
    		return {
    			city: {},
    			formData: {
						title:'',
						itemA:'',
						itemB:'',
						itemC:'',
						itemD:''

		        },
		        rules: {
					title: [
						{ required: true, message: '请输入题目内容', trigger: 'blur' },
					],
					itemA: [
						{ required: true, message: '请输入选项', trigger: 'blur' }
					],
						itemB: [
						{ required: true, message: '请输入选项', trigger: 'blur' }
					],
						itemC: [
						{ required: true, message: '请输入选项', trigger: 'blur' }
					],
						itemD: [
						{ required: true, message: '请输入选项', trigger: 'blur' }
					],
						answer: [
						{ required: true, message: '请输入正确答案', trigger: 'blur' }
					],
				
				},
			
    		}
    	},
    	components: {
    		headTop,
    	},
    	mounted(){
    		
    	},
    	methods: {
    	
  
		    submitForm(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						
						try{
							let params=new URLSearchParams()
							params.append('title',this.formData.title)
							params.append('itemA',this.formData.itemA)
							params.append('itemB',this.formData.itemB)
							params.append('itemC',this.formData.itemC)
							params.append('itemD',this.formData.itemD)
							params.append('answer',this.formData.answer)
							let result = await addTestTitle(params);
							console.log(result);
							if (result.status == 200) {
								this.$message({
					            	type: 'success',
					            	message: '添加成功'
					          	});
								  this.formData={}
				
							}else{
								this.$message({
					            	type: 'error',
					            	message: result.data.msg
					          	});
							}
						
						}catch(err){
							console.log(err)
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
			},
		}
    }
</script>

<style lang="less">
	@import '../style/mixin';
	.title{
		text-align: center;
		color: #20A0FF;
		margin: 30px 0;
	}
	.button_submit{
		text-align: center;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	    border-color: #20a0ff;
	}
	.avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 120px;
	    height: 120px;
	    line-height: 120px;
	    text-align: center;
	}
	.avatar {
	    width: 120px;
	    height: 120px;
	    display: block;
	}
	.el-table .info-row {
	    background: #c9e5f5;
	}

	.el-table .positive-row {
	    background: #e2f0e4;
	}
</style>
